<template>
	<view class="elvis-region-warp" v-if="status" >
		<view class="elvis-region-mask"></view>
		<view class="elvis-region-content">
			<view class="elvis-content-action">
				<view class="elvis-content-header">
					<view class="item" v-for="(item, index) in region" :key="index" @tap="onClickActive(item)" >{{item.name}}</view>
				</view>
				<view class="elvis-content-confirm" @tap="close()">
					<text>Confirm</text>
				</view>
			</view>
			<view class="elvis-content-picker">
				<scroll-view class="picker-warp" scroll-y="true" :scroll-info-view="anchor.id">
					<view v-for="(item, index) in data" :key="index" :class="{'picker-item': true, 'active': anchor.code == item.code}" :id="item.code" @tap="onClickSelect(item)">
						<view class="item">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>


<script>
	import { regionDict } from "./dict.js"
	export default {
		name: "ElvisEegion",
		props: {
			address: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				status: false,
				data: [],
				region: {},
				anchor: {},
			}
		},
		created(){
			this.region = this.address
			for(let index in this.address) {
				this.anchor = this.address[index]
			}
			this._loadRegionData(undefined != this.anchor.parent ? this.anchor.parent: 0)
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		methods: {
			open() {
				this.status = true
				this._loadRegionData(undefined != this.anchor.parent ? this.anchor.parent: 0)
			},
			close() {
				this.status = false
			},
			onClickSelect(item) {
				if(undefined != this.region[item.level] && this.region[item.level].code != item.code) {
					let data = {}
					for(let index in this.region) {
						if(index < item.level) {
							data[index] = this.region[index]
						}
					}
					this.region = data
				}
				this.anchor = item
				this.region[item.level] = item
				this._loadRegionData(item.code)
		
				if(this.data.length == 0) {
					this.close()
					this.$emit('input', this.region)
				}
			},
			onClickActive(item) {
				this.anchor = item
				this._loadRegionData(item.parent)
			},
			
			_loadRegionData(parent = 0) {
				this.data = []
				for(let index in regionDict) {
					if(regionDict[index].parent == parent) {
						this.data.push(regionDict[index])
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.elvis-region-warp {
		.elvis-region-mask {
			position: fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100%;
			z-index: 999;
			background: rgba(0, 0, 0, 0.6);
		}
		.elvis-region-content {
			background-color: #fff;
			position: absolute;
			left: 0;
			bottom:0;
			width: 100%;
			height: 55vh;
			z-index: 1000;
			.elvis-content-action {
				position: relative;
				display: flex;
				height: 11.733vw;
				line-height: 11.733vw;
				width: 100%;
				padding: 0 4.267vw;
				box-sizing: border-box;
				background-color: #f5f5f5;
				.elvis-content-header {
					width: 100%;
					position: relative;
					display: flex;
					height: 11.733vw;
					line-height: 11.733vw;
					.item {
						font-size: 3.733vw;
						color: #999;
						width: auto;
						max-width: 25%;
						padding-right: 4vw;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						box-sizing: border-box;
					}
				}
				.elvis-content-confirm {
					position: absolute;
					top:0;
					right: 0;
					color: #576b95;
					height: 100%;
					padding: 0 4.267vw;
					fontsize: 3.733vw;
					box-sizing: border-box;
					background-color: transparent;
					border:none;
					cirsor: pointer;
				}
			}
			.elvis-content-picker {
				width: 100%;
				height: calc(100% - 11.733vw);
				.picker-warp {
					width: 100%;
					height: 100%;
					.picker-item {
						position: relative;
						height: 11.733vw;
						line-height: 11.733vw;
						padding: 0 5.333vw;
						font-size: 3.733vw;
						color: #999;
						overflow: hidden;
					}
					.picker-item:not(:last-child)::after{
						content: "";
						position: absolute;
						left: 0;
						bottom:0;
						width:100%;
						height:1px ;
						background-color: #f5f5f5;
					}
					.active {
						color: #ff677d;
					}
					.active::before {
						content: "✓";
						display: inline-block;
						position: absolute;
						right: 4vw;
						top: 15%;
						margin-top: -1.6vw;
						width: 4.8vw;
						height: 3.2vw;
					}
				}
			}
		}
	}
</style>